<template xmlns="">
	<div class="shoping">
		<div class="s">
			<div class="head">
				<span>团购</span>
				<div class="box"></div>
				<button class="btn1" @click="go">BACK</button>
				<div class="btn2">
					<Icon type="md-search" size="19"/>
				</div>
				<div class="headrs" :style="bat">
					<List>
						<ListItem>
							<template slot="extra">
								<button class="pos" @click="fan">
									<Icon type="ios-arrow-back"/>
								</button>
							</template>
							<ListItemMeta/>
							<template slot="extra">
								<button @click="tiao">
									<Icon type="ios-arrow-forward"/>
								</button>
							</template>
						</ListItem>
					</List>
				</div>
			</div>
		</div>
		<div class="z">
			<div class="head">
				<span>
					关键字
				</span>
			</div>
			<div class="shop">
				<ButtonGroup>
					<Poptip :content="contt">
						<Button type="primary" class="btn1" @click="brunch">
							<Icon type="md-cube"/>
							brunch
						</Button>
					</Poptip>
					<Poptip  :content="contt">
						<Button type="primary" class="btn2" @click="xiang">
							<Icon type="md-cube"/>
							香肠
						</Button>
					</Poptip>
					<Poptip  :content="contt">
						<Button type="primary" class="btn3" @click="long">
							<Icon type="md-cube"/>
							小笼
						</Button>
					</Poptip>
					<Poptip  :content="contt">
						<Button type="primary" class="btn4" @click="jian">
							<Icon type="md-cube"/>
							生煎包
						</Button>
					</Poptip>
					<Poptip :content="contt">
						<Button type="primary" class="btn6" @click="jiang">
							<Icon type="md-cube"/>
							豆浆
						</Button>
					</Poptip>
					<Poptip :content="contt">
						<Button type="primary" class="btn5" @click="bing">
							<Icon type="md-cube"/>
							煎饼
						</Button>
					</Poptip>
					<Poptip :content="contt" placement="left">
						<Button type="primary" class="btn7" @click="bao">
							<Icon type="md-cube"/>
							面包
						</Button>
					</Poptip>
				</ButtonGroup>
			</div>
		</div>
		<div class="x">
			<div class="head">
				全部团购
			</div>
			<div class="in">
				<div>
					<Dropdown trigger="click" class="el">
						<Button type="primary">
							全部类别
							<Icon type="ios-arrow-down"></Icon>
						</Button>
						<DropdownMenu slot="list">
							<DropdownItem>快捷简餐</DropdownItem>
							<DropdownItem>高档餐厅</DropdownItem>
						</DropdownMenu>
					</Dropdown>
					<Dropdown class="el" trigger="click">
						<Button type="primary">
							全部商区
							<Icon type="ios-arrow-down"></Icon>
						</Button>
						<DropdownMenu slot="list">
							<DropdownItem>上西街商区</DropdownItem>
							<DropdownItem>下东街商区</DropdownItem>
						</DropdownMenu>
					</Dropdown>
					<Dropdown class="el" trigger="click">
						<Button type="primary">
							智能排序
							<Icon type="ios-arrow-down"></Icon>
						</Button>
						<DropdownMenu slot="list">
							<DropdownItem>我最喜欢</DropdownItem>
							<DropdownItem>最合口味</DropdownItem>
						</DropdownMenu>
					</Dropdown>
				</div>
				<div class="search">
					<Input v-model="search">

						<Button slot="append">
							<Icon type="ios-search" size="20"/>
						</Button>
					</Input>
				</div>

				<div class="li">
					<div class="xiang" v-for="s in shoping">
						<div class="left">
							<img src="/static/img/police.png" alt="">
						</div>
						<div class="right">
							<div class="top">{{s.name}}</div>
							<div class="bood">限购个数：{{s.number}}
								<br>
								团购价：{{s.groupprice}}
								<br>
								{{s.info}}
								<br>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="foot">
			<div class="btn3" v-if="popup">
				<div class="btn4">
					<button>
						<Icon type="md-settings" size="35"/>
					</button>
				</div>
				<div class="btn">
					<button>
						<Icon type="md-person" size="35"/>
					</button>
				</div>
				<div class="btn4">
					<button>
						<Icon type="ios-reverse-camera" size="35"/>
					</button>
				</div>
			</div>
			<button class="btn7" :style="btn" @click="info"></button>
		</div>
	</div>
</template>

<script>
	import axios from "axios";

	export default {
		name: "Discount",
		data() {
			return {
				btn: "background-image: url('" + require("../../../../php/public/static/img/zzx.png") + "')",
				popup: false,
				bat: "background-image: url('" + require("../../assets/zzman.png") + "')",
				back: '',
				shop: [],
				search: '',
				contt: '',
			}
		},
		async mounted() {
			let shoop = await axios.post('/reception/Assembly/grouppurchase').then(r => r.data)
			this.shop = shoop
			console.log(shoop)
		},
		computed: {
			shoping() {
				return this.shop.filter(b => b.name.includes(this.search))
			}
		},
		methods: {
			info() {
				if (this.popup) {
					this.popup = false
				} else {
					this.popup = true
				}
			},
			go() {
				return this.$router.push('/users/index')
			},
			tiao() {
				return this.$router.push('/users/circle')
			},
			fan() {
				return this.$router.push('/users/rank')
			},
			brunch() {
				this.contt="优惠信息"
			},
			xiang() {
				this.contt="优惠信息"
			},
			long() {
				this.contt="优惠信息"
			},
			jian() {
				this.contt="优惠信息"
			},
			jiang() {
				this.contt="优惠信息"
			},
			bing() {
				this.contt="优惠信息"
			},
			bao() {
				this.contt="优惠信息"
			},

		}
	}
</script>
<style lang="less">
	.shoping {
		max-width: 1024px;
		max-height: 1366px;
		margin: auto;

		.s {
			width: 100%;
			height: 146px;
			background-color: white;

			.headrs {
				width: 100%;
				height: 111px;
				background-repeat: no-repeat;
				background-size: 230px;
				background-position: 50%;

				.ivu-list-item {
					padding-top: 35px;
				}

				.pos {
					position: absolute;
					left: 0;
				}

				button {
					background: white;
					border: 0px;
					color: #BF5658;
				}
			}
		}

		.ivu-input-group-append {
			padding: 0;
		}
		.ivu-btn{
			margin: 0;
		}

		.el {
			margin-left: 5%;
			width: 27%;
			text-align: center;
			margin-top: 10px;

			button {
				background-color: #7C96A5;
				border: #7C96A5 1px;
			}
		}

		.ivu-btn {
			border: 0px;
		}

		.ivu-btn-primary {
			background-color: rgba(0, 0, 0, 0);
		}

		.z {
			width: 100%;
			height: 150px;

			.shop {
				.btn1 {
					width: 80px;
					height: 30px;
					background-color: #7C96A7;
					color: white;
					font-size: 15px;
					margin-left: 50px;
					border-radius: 7px;
					padding: 0;
				}

				.btn2 {
					width: 60px;
					height: 20px;
					background-color: #7C96A7;
					color: white;
					margin-left: 80px;
					/*margin-top: 10px;*/
					padding: 0;
					font-size: 15px;
				}

				.btn3 {
					width: 70px;
					height: 23px;
					background-color: #BF5658;
					color: white;
					margin-left: 120px;
					/*margin-top: 5px;*/
					padding: 0;
					font-size: 15px;
				}

				.btn4 {
					width: 70px;
					height: 25px;
					background-color: #BF5658;
					color: white;
					margin-left: 90px;
					margin-top: -5px;
					padding: 0;
					font-size: 15px;
				}

				.btn5 {
					width: 60px;
					height: 20px;
					background-color: #7C96A7;
					color: white;
					margin-left: 60px;
					margin-top: -10px;
					padding: 0;
					font-size: 15px;
				}

				.btn6 {
					width: 80px;
					height: 30px;
					background-color: #7C96A7;
					color: white;
					margin-left: 70px;
					margin-top: 15px;
					padding: 0;
					font-size: 18px;
				}

				.btn7 {
					width: 55px;
					height: 18px;
					background-color: #BF5658;
					color: white;
					margin-left: 30px;
					padding: 0;
					font-size: 15px;
				}
			}
		}

		.z > .head {
			padding: 0;
		}

		.ivu-input-group-append {
			border: 0px;
		}

		.in {
			overflow: auto;
			font-family: 微软雅黑;

			.search {
				margin: 10px 4%;
				width: 92%;
				height: 30px;
				background-color: #C25453;
				padding-top: 1px;
				padding-left: 2px;
				padding-bottom: 1px;

				input {
					border-radius: 0px;
					border: 0px;
					height: 26px;
				}

				button {
					background-color: #C25453;
					border-radius: 0px;
					color: white;
					height: 26px;
					padding-top: 0;
				}
			}
		}

		.li {
			width: 100%;
			height: 213px;
			background-color: #B0C1D3;
			overflow: auto;

			.xiang {
				height: 115px;
				width: 100%;
				/*background-color: #B0C1D3;*/
				position: relative;

				.left {
					position: absolute;
					left: 2%;
					top: 8%;
					width: 30%;
					height: 92%;
					background-color: white;
					padding: 2%;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					position: absolute;
					right: 2%;
					top: 8%;
					width: 64%;
					height: 92%;
					background-color: white;
					line-height: 1;
					border: 0px;
					padding: 2%;

					.top {
						height: 25%;
						line-height: 1;
						font-weight: bold;
					}

					.bood {
						height: 55%;
						line-height: 1;
					}
				}
			}
		}

		.x {
			width: 100%;
			height: 336px;

			.head {
				padding: 0;
			}

			.fol {
				height: 211px;
				width: 100%;

				.img2 {
					width: 100%;
					height: 49%;
					margin: 1% 0;
					float: left;
					border: 1px solid #F0F0F0;
					background-size: 100px;
					background-repeat: no-repeat;
					background-position: center;
				}

				.img1 {
					border: 1px solid #F0F0F0;
					width: 32%;
					height: 100%;
					margin-left: 1%;
					float: left;
					background-size: 20px;
				}

				overflow: auto;
			}
		}

		.foot {
			height: 35px;
			color: #FEFE00;
			width: 100%;
			background: #C45453;
			font-size: 22px;
			text-align: center;
			line-height: 1.5;
			position: relative;

			.btn3 {
				margin: auto;
				margin-top: -90px;
				width: 50%;
				height: 125px;
				background-color: rgba(0, 0, 0, 0.5);
				float: left;
				margin-left: 25%;
				/*clear: both;*/
				border-radius: 50%;

				.btn4 {
					width: 33%;
					height: 75px;
					float: left;
					margin-top: 35px;

				}

				button {
					width: 80%;
					height: 50px;
					border-radius: 50%;
					line-height: 0px;
					background-color: white;
					border: 5px solid #C45453;
					color: #C45453;
				}

				.btn {
					margin-top: 10px;
					width: 33%;
					height: 75px;
					float: left;
				}
			}

			.btn7 {
				width: 60px;
				height: 60px;
				position: absolute;
				left: 42%;
				top: -25px;
				border-radius: 50%;
				border: 0;
				background-repeat: no-repeat;
				background-position: 50% 0;
				background-size: 68px 65px;
			}
		}

		.head {
			height: 35px;
			color: white;
			width: 100%;
			background: #C45453;
			font-size: 22px;
			text-align: center;
			padding-right: 10px;
			line-height: 1.5;
			position: relative;
		}

		.head > .btn2 {
			height: 25px;
			width: 25px;
			float: right;
			margin-top: 5px;
			text-align: center;
			padding-top: 3px;
			line-height: 0px;
			background-color: white;
			color: #C45453;
			border-radius: 5px;
		}

		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid white;
			/*background-color:#FEFE00 ;*/
		}

		.clear {
			clear: both;
		}

		.btn1 {
			background: white;
			font-size: 10px;
			margin-top: 7px;
			margin-left: -1px;
			color: #C45453;
			height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}
	}
</style>